<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <i class="fa fa-angle-left" @click="back"></i>
      <p>积分记录</p>
    </header>

    <div class="points-total">
      <div class="num">
        <img src="../assets/吃货豆.png">
        <p style="color: goldenrod;">{{ sum }}</p>
      </div>
      <div class="text">
        <p>积分有效期180天，记得使用哟</p>
      </div>
    </div>

    <div class="points-detail">
      <div class="top">
        <p :class="{ active: isShouzhi }" @click="toggleTab('shouzhi')">可用积分</p>
        <p :class="{ active: !isShouzhi }" @click="toggleTab('duihuan')">已过期积分</p>
      </div>
      <div class="border">
        <ul class="get-pay" v-show="isShouzhi">
          <li class="li1">
            <ul class="details">
              <li>
                <h4>获取时间</h4>
              </li>
              <li>
                <h4>剩余数量</h4>
              </li>
              <li>
                <h4>过期时间</h4>
              </li>
            </ul>
          </li>
          <li class="li1">
            <ul class="details" v-for="item in availablePointArr" :key="item.pointId">
              <li>
                <h4>{{ formatDate(item.date) }}</h4>
              </li>
              <li>
                <p>{{ item.point }}</p>
              </li>
              <li>
                <p style="color: green;">{{ formatDate(addDays(item.date, 180)) }}</p>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="duihuan" v-show="!isShouzhi">
          <li class="li1">
            <ul class="details">
              <li>
                <h4>获取时间</h4>
              </li>
              <li>
                <h4>过期数量</h4>
              </li>
              <li>
                <h4>过期时间</h4>
              </li>
            </ul>
          </li>
          <li class="li1">
            <ul class="details" v-for="item in outDatePointArr" :key="item.pointId">
              <li>
                <h4>{{ formatDate(item.date) }}</h4>
              </li>
              <li>
                <p>{{ item.point }}</p>
              </li>
              <li>
                <p style="color: red;">{{ formatDate(addDays(item.date, 180)) }}</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PointsDetails',
  data() {
    return {
      isShouzhi: true,
      availablePointArr: [],
      outDatePointArr: [],
      user: {}
    };
  },
  computed: {
    sum() {
      return this.availablePointArr.reduce((accumulator, currentValue) => accumulator + currentValue.point, 0);
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');

    let url = `PointsController/available/${this.user.userId}`;
    this.$axios.get(url).then(response => {
      this.availablePointArr = response.data.result || [];
    }).catch(error => {
      console.error(error);
    });

    let urll = `PointsController/expired/${this.user.userId}`;
    this.$axios.get(urll).then(response => {
      this.outDatePointArr = response.data.result || [];
    }).catch(error => {
      console.error(error);
    });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toggleTab(tab) {
      this.isShouzhi = tab === 'shouzhi';
    },
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleDateString();
    },
    addDays(date, days) {
      if (!date) return '';
      const result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    }
  }
};
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #F4F8Fb;
	}

	/****************** header ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #01B0F2;
		font-size: 4.8vw;
		color: #fff;

		z-index: 10;

		display: flex;
		justify-content: flex-start;
		align-items: center;

		position: fixed;
		left: 0;
		top: 0;
	}

	.wrapper header i {
		margin: 0vw 0vw 0vw 3vw;
		font-size: 6vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper header p {
		margin: 0vw 0vw 0vw 32vw;
	}

	.wrapper .points-total {
		padding-top: 20vw;
	}

	.wrapper .points-total .num {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1vw;
	}

	.wrapper .points-total .num p {
		font-size: 6vw;
	}

	.wrapper .points-total .num img {
		width: 8vw;
		height: 8vw;
	}

	.wrapper .points-total .text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2.8vw;
	}

	.wrapper .points-detail {
		padding-top: 6vw;
	}

	.wrapper .points-detail .top {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 3.5vw;
		padding-bottom: 2vw;
	}

	.wrapper .points-detail .top p {
		font-weight: normal;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .points-detail .top p.active {
		font-weight: bold;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .points-detail .border {
		width: 100%;
		padding: 2vw 2vw 0vw 2vw;
		box-sizing: border-box;
	}

	.wrapper .points-detail .border .get-pay {
		width: 100%;
		background-color: #fff;
		border-radius: 2vw;
	}

	.wrapper .points-detail .border .get-pay .li1 {
		padding: 2vw 0vw;
	}

	.wrapper .points-detail .border .get-pay .details {
		display: flex;
		margin: 0vw 2vw;
	}

	.wrapper .points-detail .border .get-pay .details li {
		width: 34%;
		font-size: 2.8vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .points-detail .border .duihuan {
		width: 100%;
		background-color: #fff;
		border-radius: 2vw;
	}

	.wrapper .points-detail .border .duihuan .li1 {
		padding: 2vw 0vw;
	}

	.wrapper .points-detail .border .duihuan .details {
		display: flex;
		margin: 0vw 2vw;
	}

	.wrapper .points-detail .border .duihuan .details li {
		width: 34%;
		font-size: 2.8vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>